<template>  
    <div class="input_wrap">
        <input maxlength="2" class="mac_input mac_a" type="text" @keydown="nextInput($event)" @keyup="upnext($event)" @blur="testFormat('a',$event)" @focus="foucusStyle($event)"  @paste="copy($event)" > : 
        <input maxlength="2" class="mac_input mac_b" type="text" @keydown="nextInput($event)" @keyup="upnext($event)" @blur="testFormat('b',$event)" @focus="foucusStyle($event)"> : 
        <input maxlength="2" class="mac_input mac_c" type="text" @keydown="nextInput($event)" @keyup="upnext($event)" @blur="testFormat('c',$event)" @focus="foucusStyle($event)"> :
        <input maxlength="2" class="mac_input mac_d" type="text" @keydown="nextInput($event)" @keyup="upnext($event)" @blur="testFormat('d',$event)" @focus="foucusStyle($event)"> :
        <input maxlength="2" class="mac_input mac_e" type="text" @keydown="nextInput($event)" @keyup="upnext($event)" @blur="testFormat('e',$event)" @focus="foucusStyle($event)"> :
        <input maxlength="2" class="mac_input mac_f" type="text" @keydown="nextInput($event)" @keyup="upnext($event)" @blur="testFormat('f',$event)" @focus="foucusStyle($event)">
    </div>		
</template>
<script>
import formatTest from 'libs/formatTest'

export default {
    props:{
       empty:{
           type: Boolean,
		   required: true
       }
    },
    methods:{
        testFormat(type,event) {
            let parent_ele=  $(event.currentTarget).parent()
            let mac_a = parent_ele.find(".mac_a").val()
            let mac_b = parent_ele.find(".mac_b").val()
            let mac_c = parent_ele.find(".mac_c").val()
            let mac_d = parent_ele.find(".mac_d").val()
            let mac_e = parent_ele.find(".mac_e").val()
            let mac_f = parent_ele.find(".mac_f").val()
            let val = mac_a+":"+mac_b+":"+mac_c+":"+mac_d+":"+mac_e+":"+mac_f
            let reg = /^[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}$/
            let conditions = false
            switch (type) {
                case 'a':
                    conditions = mac_b&&mac_c&&mac_d&&mac_e&&mac_f?true:false
                    break;
                 case 'b':
                    conditions = mac_c&&mac_d&&mac_e&&mac_f?true:false
                    break;
                 case 'c':
                    conditions = mac_d&&mac_e&&mac_f?true:false
                    break;
                case 'd':
                    conditions = mac_e&&mac_f?true:false
                    break;
                case 'e':
                    conditions = mac_f?true:false
                    break;
                case 'f':
                    conditions = true
                    break;
                default:
                    break;
            }
            if (conditions) {
                if (reg.test(val)||(this.empty&&val==":::::")) {
                    return true
                } else {
                    parent_ele.addClass('error_foramt').addClass('animated shake')
                    setTimeout(()=> {
                        parent_ele.removeClass('animated shake')
                    }, 200)
                    return false
                } 
            }           
		},
        foucusStyle(event) {
          let parent=  $(event.currentTarget).parent()
          parent.removeClass("error_foramt")
        },
        copy(event) {
            event.preventDefault()
            let clipboardData = event.clipboardData || window.clipboardData
            let content = clipboardData.getData("text")   
            let copytext = []
            if (content.indexOf('.')>0) {
                copytext =  content.split('.')
            }
            if (content.indexOf(':')>0) {
                copytext =  content.split(':')
            }
            let parent =  $(event.currentTarget).parent()          
            parent.find('.mac_a').val(copytext[0]) 
            parent.find('.mac_b').val(copytext[1]) 
            parent.find('.mac_c').val(copytext[2]) 
            parent.find('.mac_d').val(copytext[3]) 
            parent.find('.mac_e').val(copytext[4]) 
            parent.find('.mac_f').val(copytext[5])
        },
        nextInput(event) {     
          
            if (event.keyCode==39) {
               event.preventDefault()
               $(event.currentTarget).next().focus()    
               $(event.currentTarget).next().select()
            }  
            if (event.keyCode==37) {
                event.preventDefault()
                $(event.currentTarget).prev().focus()  
                $(event.currentTarget).prev().select()  
            }  
            
        },
        upnext(event) {
            let  value= $(event.currentTarget).val().replace(/[\W_\.]/g,'')
            $(event.currentTarget).val(value)
            if ($(event.currentTarget).val().length>1&&event.keyCode!=37&&event.keyCode!=39) {
               event.preventDefault()
               $(event.currentTarget).next().focus()   
               $(event.currentTarget).next().select() 
            }            
            if ($(event.currentTarget).val().length<=0&&event.keyCode==8) {
                event.preventDefault()
                $(event.currentTarget).prev().focus()
                $(event.currentTarget).prev().select()      
            }
            
        }
    }
}

</script>
<style scoped>
    input{
		width: 20px;
		height: 100%;
		text-align: center;
		padding: 0;	
        color: #555;
        border: none;     
	}
    input:focus {
        outline: none;
        border: none;
    }
	.input_wrap{
        display: inline-block;	
		width: 180px;
		height: 25px;
		border: 1px solid  #e8e8e8;
		border-radius: 3px;
		box-sizing: border-box;
        color: #999;
        background: #ffffff;
	}
    .input_wrap input{
        border: none;
        outline: none;
    }
    input:focus{
        border: none;
        outline: none;
    }
    .error_foramt{
        border: 1px solid  #b63039;
    }
</style>